﻿<!doctype html>
<!--[if lt IE 9]><html class="lte-ie8" lang="zh-CN"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="zh-CN">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="UI Favorite,UED,前端ued网站,前端ued网站地址大全,前端ued,界面设计,互联网,网址,上网导航, 网址之家,网址大全,网址导航,资料,交互设计、用户体验">
<meta name="description" content="前端网站制作ued网站搜集整理,推荐各大门户前端ued网站地址,最好的互联网产品导航站，及时收录产品相关优秀网站，提供专业便捷的产品信息索引服务。">
<meta name="author" content="Lisa Chen">
<link rel="shortcut icon" href="images/favicon.ico">
<title>&lt;favorite/&gt;</title>
<link  href="css/public.css" rel="stylesheet">
<link href="css/page.css" rel="stylesheet">
</head>
<body>
<!--[if  IE 6]> 
<div id="ie6-warning">
	您正在使用IE6或以IE6为内核的浏览器，可能导致本网站无法正常显示。建议您升级到 <a href="http://www.microsoft.com/china/windows/internet-explorer/"
		target="_blank">Internet Explorer 8</a> 或使用： <a href="http://www.mozillaonline.com/">
			Firefox</a> / <a href="http://www.google.com/chrome/?hl=zh-CN">Chrome</a><a id="ie6-close" href="javascript:void(0)">关闭</a> 
</div>
<![endif]-->
<div class="wrapper fn-clearfix">
	<header class="header">
		<h1 class="logo"><a href="#"><strong>&lt;favorite/&gt;</strong><small>献给热爱前端的小伙伴们</small></a></h1>
		<nav class="nav" id="nav">
			<ul class="navbar">
				<li class="active"><a href="#way">我的解决方法</a></li>
				<li><a href="#ued">UED收集</a></li>
				<li><a href="#material">素材网站</a></li>
				<li><a href="#resource">前端资源</a></li>
				<li><a href="#tool">前端工具箱</a></li>
				<li><a href="#learn">学习网站</a></li>
				<li><a href="#plug-in">常用插件</a></li>
				<li><a href="#msg">资讯网站</a></li>
				<li><a href="#books">相关书籍</a></li>
			</ul>
		</nav>	
		<button class="navbar-toggle" id="navbar_toggle" type="button">
			<span class="fn-sr-only">菜单</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
	</header>
	<section class="main">
		<h2 class="headline" id="way">我的解决方法</h2>
		<ul class="thumbnail">
			<li class="thum-item">
				<a href="docs/html/form.html" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_0_01" data-src="images/img/form.jpg" alt="Form表单">
					</div>
					<h3 class="txt">Form表单</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="docs/html/modal.html" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_0_02" data-src="images/img/modal.jpg" alt="Modal弹出框">
					</div>
					<h3 class="txt">Modal弹出框</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="docs/html/align.html" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_0_03" data-src="images/img/align.jpg" alt="对齐方式">
					</div>
					<h3 class="txt">对齐方式</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="docs/html/tab.html" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_0_04" data-src="images/img/tab.jpg" alt="标签页">
					</div>
					<h3 class="txt">tab切换</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="docs/html/css3-animation.html" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_0_05" data-src="images/img/animation.jpg" alt="CSS3动画">
					</div>
					<h3 class="txt">css3 animation动画</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="docs/html/imgTxt.html" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_0_06" data-src="images/img/imgTxt.jpg" alt="图文类">
					</div>
					<h3 class="txt">图文类</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="docs/html/img-replace-text.html" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_0_07" data-src="images/img/tpthwz.jpg" alt="图片替换文本">
					</div>
					<h3 class="txt">图片替换文本</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="docs/html/btns.html" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_0_08" data-src="images/img/btns.jpg" alt="按钮">
					</div>
					<h3 class="txt">按钮</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="docs/html/menu.html" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_0_09" data-src="images/img/menu.jpg" alt="Menu菜单">
					</div>
					<h3 class="txt">Menu菜单</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="docs/html/other.html" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_0_10" data-src="images/img/other.jpg" alt="其它">
					</div>
					<h3 class="txt">其它</h3>
				</a>
			</li>
		</ul>
		<h2 class="headline" id="ued">UED收集</h2>
		<ul class="thumbnail">
			<li class="thum-item">
				<a href="http://mxd.tencent.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_1_01" data-src="images/img/tencent.jpg" alt="腾讯UED">
					</div>
					<h3 class="txt">腾讯UED</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://ued.sina.com.cn/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_1_02" data-src="images/img/sina.jpg" alt="新浪ued">
					</div>
					<h3 class="txt">新浪UED</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.woshipm.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_1_03" data-src="images/img/ren.jpg" alt="人人都是产品经理">
					</div>
					<h3 class="txt">人人都是产品经理</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://webdesigncamp.diandian.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_1_04" data-src="images/img/diandian.jpg" alt="点点网UED">
					</div>
					<h3 class="txt">点点网UED</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://cued.xunlei.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_0_05" data-src="images/img/xuelei.jpg" alt="迅雷用户体验设计中心">
					</div>
					<h3 class="txt">迅雷用户体验设计中心</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://ued.taobao.com/blog/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_1_06" data-src="images/img/aliued.jpg" alt="淘宝网UED">
					</div>
					<h3 class="txt">淘宝网UED</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://ued.ctrip.com/blog/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_1_07" data-src="images/img/xie.jpg" alt="携程网ued">
					</div>
					<h3 class="txt">携程网ued</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://uxc.360.cn/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_1_08" data-src="images/img/360.jpg" alt="360ued">
					</div>
					<h3 class="txt">360ued</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://ued.focus.cn/wordpress/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_1_09" data-src="images/img/souhu.jpg" alt="搜狐ued">
					</div>
					<h3 class="txt">搜狐ued</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://blog.19ued.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_1_10" data-src="images/img/19.jpg" alt="19楼ued">
					</div>
					<h3 class="txt">19楼ued</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://isux.tencent.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_1_11" data-src="images/img/isux.jpg" alt="腾讯ISUX">
					</div>
					<h3 class="txt">腾讯ISUX</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://mux.baidu.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_1_12" data-src="images/img/mux.jpg" alt="百度MUX">
					</div>
					<h3 class="txt">百度MUX</h3>
				</a>
			</li>
		</ul>
		<h2 class="headline" id="material">素材网站</h2>
		<ul class="thumbnail">
			<li class="thum-item">
				<a href="http://www.huaban.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_01" data-src="images/img/hua.jpg" alt="花瓣网">
					</div>
					<h3 class="txt">花瓣网</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.zcool.com.cn/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_02" data-src="images/img/zcool.jpg" alt="站酷">
					</div>
					<h3 class="txt">站酷</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.uisdc.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_03" data-src="images/img/you.jpg" alt="优设">
					</div>
					<h3 class="txt">优设</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://image.baidu.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_04" data-src="images/img/baidu.jpg" alt="baidu图片">
					</div>
					<h3 class="txt">baidu图片</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.nipic.com" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_05" data-src="images/img/nt.jpg" alt="昵图网">
					</div>
					<h3 class="txt">昵图网</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.cssmoban.com" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_06" data-src="images/img/mbzj.jpg" alt="模板之家">
					</div>
					<h3 class="txt">模板之家</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://sc.chinaz.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_07" data-src="images/img/zzsc.jpg" alt="站长素材">
					</div>
					<h3 class="txt">站长素材</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.templatemonster.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_08" data-src="images/img/tp.jpg" alt="Template Monster">
					</div>
					<h3 class="txt">Template Monster</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.jsfoot.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_09" data-src="images/img/jf.jpg" alt="jsfoot">
					</div>
					<h3 class="txt">jsfoot</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="https://www.iconfinder.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_10" data-src="images/img/if.jpg" alt="Iconfinder">
					</div>
					<h3 class="txt">Iconfinder</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.iconpng.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_11" data-src="images/img/ip.jpg" alt="爱看图标网">
					</div>
					<h3 class="txt">爱看图标网</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.chinaui.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_12" data-src="images/img/uiw.jpg" alt="CHINAUI优艾网">
					</div>
					<h3 class="txt">CHINAUI优艾网</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://popub.net:81/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_13" data-src="images/img/msc.jpg" alt="MSClass">
					</div>
					<h3 class="txt">MSClass</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.3lian.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_14" data-src="images/img/sl.jpg" alt="3lian素材">
					</div>
					<h3 class="txt">3lian素材</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://lanrentuku.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_2_15" data-src="images/img/lanren.jpg" alt="懒人图库">
					</div>
					<h3 class="txt">懒人图库</h3>
				</a>
			</li>
		</ul>
		<h2 class="headline" id="resource">前端资源</h2>
		<ul class="thumbnail">
			<li class="thum-item">
				<a href="http://www.w3cplus.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_01" data-src="images/img/w3cplus.jpg" alt="W3Cplus">
					</div>
					<h3 class="txt">W3Cplus</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.w3cfuns.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_02" data-src="images/img/w3cfuns.jpg" alt="W3Cfuns">
					</div>
					<h3 class="txt">W3Cfuns</h3>
				</a>
			</li>
			
			<li class="thum-item">
				<a href="http://www.html5cn.org/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_03" data-src="images/img/html5c.jpg" alt="HTML5中国">
					</div>
					<h3 class="txt">HTML5中国</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.alloyteam.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_04" data-src="images/img/at.jpg" alt="AlloyTeam">
					</div>
					<h3 class="txt">AlloyTeam</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.zhangxinxu.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_05" data-src="images/img/xkj.jpg" alt="鑫空间,鑫生活">
					</div>
					<h3 class="txt">鑫空间,鑫生活</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://getbootstrap.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_06" data-src="images/img/b.jpg" alt="Bootstrap">
					</div>
					<h3 class="txt">Bootstrap</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.cnblogs.com/rubylouvre/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_07" data-src="images/img/stzm.jpg" alt="司徒正美博客">
					</div>
					<h3 class="txt">司徒正美博客</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://nec.netease.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_08" data-src="images/img/nec.jpg" alt="NEC">
					</div>
					<h3 class="txt">NEC</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.web92.net/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_09" data-src="images/img/ss.jpg" alt="前端攻城狮剥壳">
					</div>
					<h3 class="txt">前端攻城狮剥壳</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://purecss.io/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_10" data-src="images/img/pure.jpg" alt="Pure">
					</div>
					<h3 class="txt">Pure</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.qianduan.net/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_11" data-src="images/img/qdgc.jpg" alt="前端观察">
					</div>
					<h3 class="txt">前端观察</h3>
				</a>
			</li>
			
			<li class="thum-item">
				<a href="http://www.daqianduan.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_12" data-src="images/img/dqd.jpg" alt="大前端">
					</div>
					<h3 class="txt">大前端</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://metroui.org.ua/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_13" data-src="images/img/mu.jpg" alt="MetroUI">
					</div>
					<h3 class="txt">MetroUI</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://960.gs/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_14" data-src="images/img/960.jpg" alt="960网格系统">
					</div>
					<h3 class="txt">960网格系统</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://yuilibrary.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_15" data-src="images/img/yui.jpg" alt="YUI">
					</div>
					<h3 class="txt">YUI</h3>
				</a>
			</li>
			
			<li class="thum-item">
				<a href="http://www.ruanyifeng.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_16" data-src="images/img/ryf.jpg" alt="阮一峰的个人网站">
					</div>
					<h3 class="txt">阮一峰的个人网站</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://f2e.im/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_17" data-src="images/img/f2e.jpg" alt="F2E社区">
					</div>
					<h3 class="txt">F2E社区</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.html-js.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_18" data-src="images/img/du.jpg" alt="前端乱炖">
					</div>
					<h3 class="txt">前端乱炖</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.jiawin.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_3_19" data-src="images/img/wj.jpg" alt="觉唯">
					</div>
					<h3 class="txt">觉唯</h3>
				</a>
			</li>
		</ul>	
		<h2 class="headline" id="tool">前端工具箱</h2>
		<ul class="thumbnail">
			<li class="thum-item">
				<a href="http://phonegap.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_4_01" data-src="images/img/pg.jpg" alt="PhoneGap">
					</div>
					<h3 class="txt">PhoneGap</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://jsfiddle.net/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_4_02" data-src="images/img/jsa.jpg" alt="jsfiddle">
					</div>
					<h3 class="txt">jsfiddle</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://jsbin.com" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_4_03" data-src="images/img/jsb.jpg" alt="jsbin">
					</div>
					<h3 class="txt">jsbin</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://css3generator.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_4_04" data-src="images/img/c3g.jpg" alt="css3generator">
					</div>
					<h3 class="txt">css3generator</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://tool.oschina.net/jscompress/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_4_05" data-src="images/img/cz.jpg" alt="在线JS/CSS/HTML压缩">
					</div>
					<h3 class="txt">在线JS/CSS/HTML压缩</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_4_06" data-src="images/img/cv.jpg" alt="W3C CSS验证">
					</div>
					<h3 class="txt">W3C CSS验证</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://tinypng.org/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_4_07" data-src="images/img/tpng.jpg" alt="PNG优化">
					</div>
					<h3 class="txt">PNG优化</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.qiuziti.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_4_08" data-src="images/img/qiu.jpg" alt="字体识别">
					</div>
					<h3 class="txt">字体识别</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://riddle.pl/emcalc/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_4_09" data-src="images/img/em.jpg" alt="Em Calculator在线转换工具">
					</div>
					<h3 class="txt">Em Calculator在线转换工具</h3>
				</a>
			</li>
		</ul>
		<h2 class="headline" id="learn">学习网站</h2>
		<ul class="thumbnail">
			<li class="thum-item">
				<a href="http://www.w3school.com.cn/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_5_01" data-src="images/img/w3c.jpg" alt="W3school">
					</div>
					<h3 class="txt">W3school</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.imooc.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_5_02" data-src="images/img/mk.jpg" alt="慕课网">
					</div>
					<h3 class="txt">慕课网</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.miaov.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_5_03" data-src="images/img/mq.jpg" alt="妙趣课堂">
					</div>
					<h3 class="txt">妙趣课堂</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.ilovexuexi.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_5_04" data-src="images/img/il.jpg" alt="ilove学习">
					</div>
					<h3 class="txt">ilove学习</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.111cn.net/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_5_05" data-src="images/img/yjc.jpg" alt="壹聚教程">
					</div>
					<h3 class="txt">壹聚教程</h3>
				</a>
			</li>
		</ul>
		<h2 class="headline" id="plug-in">常用插件</h2>
		<ul class="thumbnail">
			<li class="thum-item">
				<a href="http://jquery.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_6_01" data-src="images/img/jq1.jpg" alt="jquery">
					</div>
					<h3 class="txt">jquery</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://jquerymobile.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_6_02" data-src="images/img/jqm.jpg" alt="jqueryMobile">
					</div>
					<h3 class="txt">jqueryMobile</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://jqueryui.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_6_03" data-src="images/img/jqui.jpg" alt="jqueryUi">
					</div>
					<h3 class="txt">jqueryUi</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://zeptojs.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_6_04" data-src="images/img/zepto.jpg" alt="zeptojs">
					</div>
					<h3 class="txt">zeptojs</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.highcharts.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_6_05" data-src="images/img/his.jpg" alt="Highcharts图表控件 ">
					</div>
					<h3 class="txt">Highcharts图表控件 </h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.superslide2.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_6_06" data-src="images/img/sups.jpg" alt="superslide">
					</div>
					<h3 class="txt">superslide</h3>
				</a>
			</li>
			
			<li class="thum-item">
				<a href="http://www.tianqi.com/plugin/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_6_07" data-src="images/img/tqw.jpg" alt="天气网">
					</div>
					<h3 class="txt">天气网</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.fallr.net/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_6_08" data-src="images/img/fal.jpg" alt="简单优雅的模态框">
					</div>
					<h3 class="txt">简单优雅的模态框</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.bshare.cn/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_6_09" data-src="images/img/bs.jpg" alt="bshare分享">
					</div>
					<h3 class="txt">bshare分享</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://masonry.desandro.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_6_10" data-src="images/img/mas.jpg" alt="jQuery的砌体">
					</div>
					<h3 class="txt">jQuery的砌体</h3>
				</a>
			</li>
			
			<li class="thum-item">
				<a href="http://www.ztree.me/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_6_11" data-src="images/img/ztree.jpg" alt="zTree -- jQuery树插件">
					</div>
					<h3 class="txt">zTree -- jQuery树插件</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.lssdjt.com/code/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_6_12" data-src="images/img/tih.jpg" alt="历史上的今天">
					</div>
					<h3 class="txt">历史上的今天</h3>
				</a>
			</li>
		</ul>
		<h2 class="headline" id="msg">资讯网站</h2>
		<ul class="thumbnail">
			<li class="thum-item">
				<a href="http://www.yixieshi.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_7_01" data-src="images/img/yxs.jpg" alt="互联网那点事">
					</div>
					<h3 class="txt">互联网的一些事</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.zhihu.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_7_02" data-src="images/img/zh.jpg" alt="知乎">
					</div>
					<h3 class="txt">知乎</h3>
				</a>
			</li>
			<li class="thum-item">
				<a href="http://www.36kr.com/" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_7_03" data-src="images/img/36.jpg" alt="36氪">
					</div>
					<h3 class="txt">36氪</h3>
				</a>
			</li>
		</ul>
		<h2 class="headline" id="books">相关书籍</h2>
		<ul class="thumbnail books">
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_01" data-src="images/books/hhj.jpg" alt="《UCD火花集》">
					</div>
					<div class="txt">
						<h3>UCD火花集</h3>
						<p>本书适合有一定工作经验，从事产品设计、产品策划、交互设计、视觉设计、用户研究、前端开发、网站运营，以及所有与互联网有关的从业人员阅读。</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_02" data-src="images/books/wzsj.jpg" alt="网站设计解构-有效的交互设计框架和模式">
					</div>
					<div class="txt">
						<h3>网站设计解构-有效的交互设计框架和模式</h3>
						<p>介绍交互设计框架化体系结构的各个组成元素，剖析其功能及工作原理，是Web 交互设计师必备的完整指南。</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_03" data-src="images/books/hd.jpg" alt="Head First HTML与CSS、XHTML(中文版)">
					</div>
					<div class="txt">
						<h3>Head First HTML与CSS、XHTML(中文版)</h3>
						<p>Head First HTML and CSS, XHTML 的书依然是最易懂，清晰和正确的入门读物</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_04" data-src="images/books/hc.jpg" alt="HTML与CSS入门经典(第7版)">
					</div>
					<div class="txt">
						<h3>HTML与CSS入门经典(第7版)</h3>
						<p>本书通过大量的示例，以循序渐进的方式引导读者通过实践迅速、全面地掌握HTML和CSS的基础知识，适合对制作网页感兴趣的初学者。</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_05" data-src="images/books/cg.jpg" alt="网站重构—应用Web标准进行设计">
					</div>
					<div class="txt">
						<h3>应用Web标准进行设计</h3>
						<p>本书着重分析了"Web标准"思想的产生、发展和推广，并从技术细节上讲解了网站实际制作和开发的过程中如何向Web标准过渡，如何采用和符合Web标准。</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_06" data-src="images/books/c2.jpg" alt="CSS网站布局实录">
					</div>
					<div class="txt">
						<h3>CSS网站布局实录</h3>
						<p>通过阅读本书，我们将获得新的网站设计方面的思考方式、xHTML与CSS相结合的使用方法，从而帮助大家创建更具创造性、高效、易于维护与访问的网站。</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_07" data-src="images/books/gzl.jpg" alt="编写高质量代码--Web前端开发修炼之道">
					</div>
					<div class="txt">
						<h3>Web前端开发修炼之道</h3>
						<p>本书紧接着全方位地解析了作为一名合格的前端工程师应该掌握的技能和承担的职责，这对刚加入前端开发这一行的读者来说有很大的知道意义。</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_08" data-src="images/books/ll.jpg" alt="《高流量网站CSS开发技术》迷你书">
					</div>
					<div class="txt">
						<h3>高流量网站CSS开发技术</h3>
						<p>主要是关于编写CSS时需要注意的事项，一些突发问题，矛盾的处理方法等等。</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_09" data-src="images/books/js6.jpg" alt="javascript权威指南(第6版)">
					</div>
					<div class="txt">
						<h3>javascript权威指南(第6版)</h3>
						<p>由淘宝前端团队翻译，全面介绍JS语言的核心，以及浏览器中实现的遗留和标准DOM。举例说明如何处理验证表单数据、使用cookie、创建可移植的DHTML动画等常见任务。</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_10" data-src="images/books/js3.jpg" alt="JavaScript高级程序设计（第3版）">
					</div>
					<div class="txt">
						<h3>JavaScript高级程序设计(第3版)</h3>
						<p>全面深入、贴近实战的特点，在详细讲解了JavaScript语言的核心之后，展示了现有规范及实现为开发Web应用提供的各种支持和特性。</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_11" data-src="images/books/gxn.jpg" alt="《高性能网站建设进阶指南：Web开发者性能优化最佳实践》">
					</div>
					<div class="txt">
						<h3>高性能网站建设进阶指南:Web开发者性能优化最佳实践</h3>
						<p>在本书中，你将学习如何节省宝贵的网站加载时间，使其更快地响应用户的请求。</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_12" data-src="images/books/jq.jpg" alt="jQuery基础教程（第三版）">
					</div>
					<div class="txt">
						<h3>jQuery基础教程（第三版）</h3>
						<p>jQuery官网推荐书籍</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_13" data-src="images/books/wt.jpg" alt="悟透javascript">
					</div>
					<div class="txt">
						<h3>悟透javascript</h3>
						<p>你有没有看过哪本说JS的书里面全是漫画？你有没有看过这么幽默和谐的漫画？？？快来看啊！</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_14" data-src="images/books/css.jpg" alt="CSS权威指南(第三版)">
					</div>
					<div class="txt">
						<h3>CSS权威指南(第三版)</h3>
						<p>它详细讲述TESS的各个属性，告诉你怎样同其他属性交互，怎样在编写CSS时避免常见的错误。</p>
					</div>
				</a>
			</li>			
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_15" data-src="images/books/n.jpg" alt="Node入门一本全面地Node.js教程">
					</div>
					<div class="txt">
						<h3>Node入门</h3>
						<p>本书致力于教你如何用Node.js来开发应用，过程中会传授你所有所需的“高级”JavaScript知识。本书绝不是一本“Hello World”的教程。</p>
					</div>
				</a>
			</li>
			
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_16" data-src="images/books/h5s.jpg" alt="HTML5 开发精要与实例详解">
					</div>
					<div class="txt">
						<h3>HTML5开发精要与实例详解</h3>
						<p>本书提供所有案例的源代码，读者可以进行实战练习，也可以根据需要对这些代码进行修改，以观察不同的效果，从而加深对案例代码和书中知识点的理解。</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_17" data-src="images/books/h5.jpg" alt="html5移动web开发指南">
					</div>
					<div class="txt">
						<h3>html5移动web开发指南</h3>
						<p>本书主要围绕html5技术，讲述如何利用html5相关技术开发移动web网站和web app应用程序。</p>
					</div>
				</a>
			</li>
			<li class="thum-item">
				<a href="#" target="_blank">
					<div class="img">
						<img class="lazyload" id="img_8_18" data-src="images/books/c3.jpg" alt="css3实战：开发与设计">
					</div>
					<div class="txt">
						<h3>css3实战：开发与设计</h3>
						<p>由于“实战”是本书的核心与目的，书中以大量的单独例子和一些贯穿全书的实例来让读者亲身实战CSS3。</p>
					</div>
				</a>
			</li>
		</ul>
		<footer class="footer">
			<p>Copyright © favorite. All Rights Reserved</p>
			<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F11bfa56fcf7da05b2dac324f4425958f' type='text/javascript'%3E%3C/script%3E"));
</script>
		</footer>
	</section>
</div>

<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
</body>
</html>
